<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透视点的位置(观察者)</title>
  <style>
    .outer{
      width: 300px;
      height: 300px;
      border:2px solid black;
      margin:520px;
      transform-style: preserve-3d;/*开启3D空间*/
      perspective: 500px;
      /*
      设置透视点的位置(也就是观察者的位置),默认是盒子中心
      通常情况下,我们不需要调节透视点位置
      */
      perspective-origin: 152px 152px;

    }
    .inner{
      width: 300px;
      height: 300px;
      background-color: deepskyblue;
      text-align: center;
      line-height: 300px;
      /*3D旋转*/
      transform: rotateX(30deg);
    }

  </style>
</head>
<body>
<div class="outer">
  <div class="inner">inner1</div>
</div>

</body>
</html>